<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome Icon Library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
            margin: 0 auto;
            max-width: 800px;
            padding: 20px;
        }

        .heading {
            font-size: 25px;
            margin-right: 25px;
        }

        .fa {
            font-size: 25px;
        }

        .checked {
            color: orange;
        }

        .side {
            float: left;
            width: 15%;
            margin-top: 10px;
        }
        .middle {
            margin-top: 10px;
            float: left;
            width: 70%;
        }
        .right {
            text-align: right;
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* The bar container */
        .bar-container {
            width: 100%;
            background-color: #f1f1f1;
            text-align: center;
            color: white;
        }

        /* Individual bars */
        .bar-5 {
            width: 100%;
            height: 18px;
            background-color: #04AA6D;
        }

        .bar-4 {
            width: 80%;
            height: 18px;
            background-color: #2196F3;
        }

        .bar-3 {
            width: 60%;
            height: 18px;
            background-color: #00bcd4;
        }

        .bar-2 {
            width: 40%;
            height: 18px;
            background-color: #ff9800;
        }

        .bar-1 {
            width: 20%;
            height: 18px;
            background-color: #f44336;
        }

        /* Responsive layout - make the columns stack on top of each other instead of next to each other */
        @media (max-width: 400px) {

            .side,
            .middle {
                width: 100%;
            }

            .right {
                display: none;
            }
        }
    </style>
</head>

<body>

    <span class="heading">User Rating</span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star "></span>
    <span class="fa fa-star checked"></span>
    <span class="fa fa-star"></span>
    <p>4.1 average based on 254 reviews.</p>
    <hr style="border:3px solid #f1f1f1">

    <div class="row">
        <div class="side">
            <div>5 star</div>
        </div>
        <div class="middle">
            <div class="bar-container">
                <div class="bar-4"></div>
            </div>
        </div>
        <div class="side right">
            <div>150</div>
        </div>


        <div class="side">
            <div>4 star</div>
        </div>
        <div class="middle">
            <div class="bar-container">
                <div class="bar-2"></div>
            </div>
        </div>
        <div class="side right">
            <div>63</div>
        </div>

    </div>

    



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        
        必知必会 
        
        不一定要用 table 来做, 也可以用  float: left 来做

        <div class="side">
            <div>5 star</div>
        </div>
        <div class="middle">
            <div class="bar-container">
                <div class="bar-4"></div>
            </div>
        </div>
        <div class="side right">
            <div>150</div>
        </div>
        
        .bar-4 {
            width: 80%;
            height: 18px;
            background-color: #2196F3;
        }
        .side {
            float: left;
            width: 15%;
            margin-top: 10px;
        }
        .middle {
            margin-top: 10px;
            float: left;
            width: 70%;
        }
        
        星星:
        .checked {
            color: orange;
        }
    </xmp>

</body>

</html>